<template>
	<div style="display: flex; justify-content: space-between">
		<h2>学生管理</h2>
		<h2><button @click="go2add()">添加学生</button></h2>
	</div>
	<div style="display: flex">
		<div style="width: 99%; border: blue 1px solid">
			<h2 style="text-align: center">学生显示</h2>
			<table border="1" style="width: 100%">
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>账号</th>
					<!-- <th>密码</th> -->
					<th>教室</th>
					<th>图片</th>
					<th>操作</th>
				</tr>
				<tr v-for="x in stus" :key="x.uid" @click="go2up(x.uid)">
					<td>{{ x.uid }}</td>
					<td>{{ x.uname }}</td>
					<td>{{ x.phone }}</td>
					<!-- <td>{{ x.pwd }}</td> -->
					<td>{{ x.clz.clzname }}</td>
					<td>
						<div style="width: 50px; height: 6vh;">
							<img :src="$ip + `/api/public/showimg/${x.pic}`" style="width: 100%; height: 100%" />
						</div>
					</td>
					<td><button @click.stop="del(x.uid)">删除</button></td>
				</tr>
			</table>
			<div style="text-align: center;">
				<button @click="pages(-1)">上一页</button> {{ page.pagenum }} / {{ totalPages }}
				<button @click="pages(1)">下一页</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 定义学生数组
			stus: [],
			
			page: {//分页数据
				pagenum: 1,
				lines: 5,
				total: 1,
			},
			token: "",
			dodel: ""//删除学生
		};
	},
	computed: {
		totalPages() {//总页数
			return Math.ceil(this.page.total / this.page.lines);
		}
	},
	methods: {
		go2up(uid) {//更新:根据uid去修改
			this.$router.push({
				path: '/adm/stuadd',
				query: { id: uid }
			});
		},
		go2add() {//添加，通过路由跳转，并携带参数，通过路由参数获取id
			this.$router.push({
				path: '/adm/stuadd',
				query: { id: 0 }
			});
		},
		del(uid) {//删除,通过uid删除
			this.$axios.get(`${this.$ip}/api/adm/stu/del?uid=${uid}`, { headers: { 'Authorization': this.token } })
				.then((resp) => {
					this.stus = resp.data.data;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error('删除学生:', error);
					alert('删除学生失败');
				});
		},
		pages(a) {//分页
			let pagenum = this.page.pagenum + a;//当前页码
			if (pagenum < 1) pagenum = 1;//首页
			if (pagenum > this.totalPages) pagenum = this.totalPages;//最后一页
			this.page.pagenum = pagenum;//当前页码

			const url = `${this.$ip}/api/adm/stu/findPage?pagenum=${pagenum}&lines=${this.page.lines}`;
			//分页接口
			this.$axios.get(url, { headers: { 'Authorization': this.token } })//获取学生数据
				.then((resp) => {
					this.stus = resp.data.data.students;
					this.page.total = resp.data.data.total;
					console.log(resp.data.data);
				})
				.catch((error) => {
					console.error('获取学生数据:', error);
					alert('获取学生数据失败');
				});
		}
	},
	mounted() {//页面加载时执行
		this.token = window.localStorage.getItem("token");//获取token
		const url = `${this.$ip}/api/adm/stu/findPage?pagenum=${this.page.pagenum}&lines=${this.page.lines}`;
		//分页接口
		this.$axios.get(url, { headers: { 'Authorization': this.token }})//获取学生数据
			.then((resp) => {
				this.stus = resp.data.data.students;
				this.page.total = resp.data.data.total;
				console.log(resp.data.data);
			})
			.catch((error) => {
				console.error('初始获取学生数据:', error);
				alert('初始获取学生数据失败');
			});
	}
};
</script>

<style></style>